<script setup lang="ts">

import MyMonaconEditor from "~/components/editor/MyMonaconEditor.vue";
import {isValidJson} from "~/utils/common";
import MDPreview from "~/components/editor/MDPreview.vue";

interface Props {
  language?: string,
  label?: string
  sampleData?: any
  hasSample?: boolean
  height: number
}

const props = withDefaults(defineProps<Props>(), {
  language: 'json',
  label: '在线编辑',
  showSample: false,
  sampleData: {},
  height: 600
})

const value = defineModel<string>()


const tempContent = ref(value.value)
const dialog = ref(false)

const save = () => {
  if (props.language === 'json') {
    if (isValidJson(tempContent.value as string)) {
      value.value = tempContent.value
      dialog.value = false
    } else {
      useSnackbarStore().showErrorMessage('不是有效的json格式')
    }
  }
}
const tab = ref('editor')


const sampleJson = computed(()=>{
  return JSON.stringify(props.sampleData, null, 2)
})
const showSample=ref(false)
</script>

<template>
  <v-btn @click="dialog=true">{{ label }}</v-btn>
  <v-dialog v-model="dialog" width="60%">
    <v-card height="800">

      <v-card-title>
        配置内容
        <v-spacer></v-spacer>
        <v-btn icon="mdi-close" @click="dialog=false" variant="text">
        </v-btn>
      </v-card-title>
      <v-card-text>
        <slot name="description"/>
        <v-row>
          <v-col class="d-flex">
            <v-spacer></v-spacer>
            <v-btn v-show="hasSample" size="small" @click="showSample=true">查看示例数据</v-btn>
            <v-dialog width="50%" v-model="showSample">
              <MDPreview :text="sampleJson"/>
            </v-dialog>

            <v-btn size="small" @click="dialog=false">取消</v-btn>
            <v-btn size="small" prepend-icon="mdi-content-save" @click="save">保存编辑</v-btn>
          </v-col>
        </v-row>
        <MyMonaconEditor v-model="tempContent" :language="language" :height="height"></MyMonaconEditor>
      </v-card-text>
    </v-card>
  </v-dialog>

</template>

<style scoped lang="scss">

</style>